<template>
    <div class="app-container">
        <el-form
            ref="queryParamsRef"
            :model="queryParams"
            label-position="left"
            label-width="auto"
        >
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-row :gutter="24">
                        <el-col :span="15">
                            <el-form-item label="法警单位：" label-width="82" prop="unitId">
                                <DepartmentCascader v-model="queryParams.unitId" placeholder="请选择法警单位"
                                                    @change="searchHandle"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="含下级：" label-width="70">
                                <el-tooltip content="是否包含下级单位">
                                    <el-switch v-model="childUnitId" :disabled="!queryParams.unitId"
                                               @change="childUnitIdSearchHandle"/>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="法警姓名：" prop="userName">
                        <el-input v-model="queryParams.userName" placeholder="请输入法警姓名"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="一级任务项：" prop="taskTypeId">
                        <el-select
                            v-model="queryParams.taskTypeId"
                            clearable
                            placeholder="请选择一级任务项"
                            @change="changeTaskTypeHandle"
                        >
                            <el-option
                                v-for="item in taskList"
                                :key="item.taskId"
                                :label="item.taskname"
                                :value="item.taskId"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="二级任务项：" prop="taskTypeId2">
                        <el-select
                            v-model="queryParams.taskTypeId2"
                            clearable
                            placeholder="请选择二级任务项"
                            @change="getTableData"
                        >
                            <el-option
                                v-for="item in taskTwoList"
                                :key="item.taskId"
                                :label="item.taskname"
                                :value="item.taskId"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="派警类型：" prop="sendPoliceType">
                        <el-select
                            v-model="queryParams.sendPoliceType"
                            clearable
                            placeholder="请选择派警类型"
                            @change="getTableData"
                        >
                            <el-option
                                v-for="item in nj_sendpolice_type"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="派警日期起止：">
                        <el-date-picker
                            v-model="sendPoliceTime"
                            end-placeholder="截止时间"
                            range-separator="-"
                            start-placeholder="开始时间"
                            type="daterange"
                            unlink-panels
                            value-format="YYYY-MM-DD"
                            @change="changeSendPoliceTimerHandle"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="执勤开始时间：">
                        <el-date-picker
                            v-model="searchTime"
                            end-placeholder="截止时间"
                            range-separator="-"
                            start-placeholder="开始时间"
                            type="daterange"
                            unlink-panels
                            value-format="YYYY-MM-DD"
                            @change="changeDateTimerHandle"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6" style="display: flex;justify-content: space-between;">
                    <!--                    <el-form-item label="状态：" prop="state">-->
                    <!--                        <el-select-->
                    <!--                            v-model="queryParams.state"-->
                    <!--                            placeholder="选择状态"-->
                    <!--                            clearable-->
                    <!--                            @change="getTableData"-->
                    <!--                        >-->
                    <!--                            <el-option-->
                    <!--                                v-for="item in nj_sendpolice_status"-->
                    <!--                                :key="item.value"-->
                    <!--                                :label="item.label"-->
                    <!--                                :value="item.value"-->
                    <!--                            />-->
                    <!--                        </el-select>-->
                    <!--                    </el-form-item>-->
                    <el-form-item>
                        <el-button type="primary" @click="searchHandle">
                            <el-icon class="me-1">
                                <Search/>
                            </el-icon>
                            查询
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resetQueryParamsHandle(queryParamsRef)">
                            <el-icon class="me-1">
                                <Refresh/>
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="warning" @click="exportHandleXlsx('各市履职统计列表')">
                            <el-icon class="me-1">
                                <Download/>
                            </el-icon>
                            导出
                        </el-button>
                    </el-form-item>
                </el-col>
                <el-col :offset="18" :span="2">
                    <!--                    <el-form-item>-->
                    <!--                        <el-button type="primary" @click="searchHandle">-->
                    <!--                            <el-icon class="me-1">-->
                    <!--                                <Search/>-->
                    <!--                            </el-icon>-->
                    <!--                            查询-->
                    <!--                        </el-button>-->
                    <!--                    </el-form-item>-->
                </el-col>
                <el-col :span="2">
                    <!--                    <el-form-item>-->
                    <!--                        <el-button @click="resetQueryParamsHandle(queryParamsRef)">-->
                    <!--                            <el-icon class="me-1">-->
                    <!--                                <Refresh/>-->
                    <!--                            </el-icon>-->
                    <!--                            重置-->
                    <!--                        </el-button>-->
                    <!--                    </el-form-item>-->
                </el-col>
                <el-col :span="2">
                    <!--                    <el-form-item>-->
                    <!--                        <el-button type="warning" @click="exportHandleXlsx('各市履职统计列表')">-->
                    <!--                            <el-icon class="me-1">-->
                    <!--                                <Download/>-->
                    <!--                            </el-icon>-->
                    <!--                            导出-->
                    <!--                        </el-button>-->
                    <!--                    </el-form-item>-->
                </el-col>
            </el-row>
        </el-form>

        <el-table
            ref="tableDataRef"
            v-loading="loading"
            :data="tableData"
            :default-sort="defaultSort"
            border
            stripe
            :row-style="tableRowStyle"
            show-overflow-tooltip
            @sort-change="handleSortChange"
            @row-dblclick="handleDbClick"
        >
            <el-table-column type="index" width="50"/>
            <el-table-column :sort-orders="sortOrders" label="法警单位" prop="unitName" sortable="unitName"/>
            <el-table-column :sort-orders="sortOrders" label="法警姓名" prop="userName" sortable="userName"/>
            <el-table-column :sort-orders="sortOrders" label="一级任务项" prop="task1name" sortable="task1name"/>
            <el-table-column :sort-orders="sortOrders" label="二级任务项" prop="task2name" sortable="task2name"/>
            <el-table-column :sort-orders="sortOrders" label="派警类型" prop="sendPoliceTypeName"
                             sortable="sendPoliceTypeName"/>
            <el-table-column :sort-orders="sortOrders" label="派警时间" prop="sendDate" sortable="sendDate"/>
            <el-table-column :sort-orders="sortOrders" label="执勤开始时间" prop="actDate" sortable="actDate"/>
            <el-table-column :sort-orders="sortOrders" label="执勤结束时间" prop="endDate" sortable="endDate"/>
            <el-table-column label="实施情况" prop="actdetail"/>
            <el-table-column label="操作">
                <template #default="scope">
                    <!--                    <router-link-->
                    <!--                        to="/PoliceWork/SendPolice"-->
                    <!--                        class="el-button el-button&#45;&#45;primary el-button&#45;&#45;small is-link"-->
                    <!--                    >-->
                    <!--                        详情-->
                    <!--                    </router-link>-->
                    <el-button
                        v-if="scope.row.sendPoliceTypeName==='直接派警'"
                        link
                        size="small"
                        type="primary"
                        @click="AddEditSendPoliApplRef.showEditUsePoliAppl({
                                                state: 0,
                                                jw_sendpolice_id: scope.row.jw_sendpolice_id,
                                                unit_id: scope.row.unitName,
                                                object_id: scope.row.object_id
                                            },'查看警务派警信息','4','View')"
                    >
                        详情
                    </el-button>


                    <el-button
                        v-if="scope.row.sendPoliceTypeName==='用警申请'"
                        link
                        size="small"
                        type="primary"
                        @click="SeeUsePoliApplDetailRef.showEditUsePoliAppl({
                            state:0,
                            jw_policeapply_id:scope.row.object_id,
                            unit_id: scope.row.unitName,
                        },'用警申请信息','1','View')"
                    >
                        详情
                    </el-button>

                    <!--                    <el-button-->
                    <!--                        type="primary"-->
                    <!--                        size="small"-->
                    <!--                        link-->
                    <!--                        v-if="scope.row.sendPoliceTypeName==='警务区执勤' && scope.row.task2name === '' "-->
                    <!--                        @click="SeeUsePoliApplDetailRef.showEditUsePoliAppl({-->
                    <!--                            state:0,-->
                    <!--                            jw_policeapply_id:scope.row.jw_policeapply_id,-->
                    <!--                            unit_id: scope.row.unitName,-->
                    <!--                        },'用警申请信息','1','View')"-->
                    <!--                    >-->
                    <!--                        详情-->
                    <!--                    </el-button>-->


                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            v-model:limit="paging.pageSize"
            v-model:page="paging.pageNum"
            :total="total"
            @pagination="getTableData"
        />
    </div>
    <AddEditSendPoliAppl ref="AddEditSendPoliApplRef"/>
    <SeeUsePoliApplDetail ref="SeeUsePoliApplDetailRef"/>
</template>

<script setup>
import {getCurrentInstance, useTemplateRef} from 'vue';
import DepartmentCascader from '@/components/DepartmentCascader/DepartmentCascader.vue';
import {getSendPoliceTableList} from '@/api/StatisticAnalysis/CityResumptionChart.js';
import {getTaskList} from '@/api/task/task.js';
import {useRoute} from 'vue-router';
import {exportHandleXlsx} from '@/utils/export.js';
import {Download} from '@element-plus/icons-vue';
import AddEditSendPoliAppl from '@/components/UserPoli/UserPoli.vue';
import SeeUsePoliApplDetail from '@/components/UserPoli/SeeUsePoliApplDetail.vue';
import PageEnum from '@/enum/PageEnum.js';
import useUserStore from '@/store/modules/user.js';

const {proxy} = getCurrentInstance();
const {
    nj_sendpolice_type,
    nj_sendpolice_status
} = proxy.useDict('nj_sendpolice_type', 'nj_sendpolice_status')

const userUnit = useUserStore().info.unitId;
const route = useRoute()
const {unitId, taskTypeId, taskTypeId2, status} = route.query

const queryParamsRef = useTemplateRef('queryParamsRef');
const AddEditSendPoliApplRef = useTemplateRef('AddEditSendPoliApplRef');
const SeeUsePoliApplDetailRef = useTemplateRef('SeeUsePoliApplDetailRef')

const searchTime = ref([]);
const sendPoliceTime = ref([])
const childUnitId = ref(false)
const queryParams = ref({
    // 法警单位
    unitId: Number(unitId) || userUnit || '',
    // 含下级单位
    childUnitId: '',
    // 法警姓名
    userName: '',
    // 一级任务 ID
    taskTypeId: taskTypeId || '',
    // 二级任务 ID
    taskTypeId2: taskTypeId2 || '',
    // 派警类型
    sendPoliceType: '',
    // 状态
    state: status || '',

    params: {
        // 执勤时间
        beginTime: '',
        endTime: '',
        // 派警日期起止
        sendPoliceBeginTime: '',
        sendPoliceEndTime: ''
    }
});

const taskOptionAll = ref([])
const taskList = ref([])
const taskTwoList = ref([])

const loading = ref(false)
const tableData = ref([]);
const total = ref(0)
const tableDataRef = useTemplateRef('tableDataRef')
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE,
    isAsc: 'ascending',
    orderByColumn: 'unitName'
})
const defaultSort = ref({prop: 'unitName', order: 'descending'});
const sortOrders = reactive(['descending', 'ascending'])

onMounted(() => {
    getTask()
    getTableData()
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
const childUnitIdSearchHandle = (e) => {
    queryParams.value.childUnitId = e ? queryParams.value.unitId : '';
    getTableData()
}
/** 排序触发事件 */
const handleSortChange = (column, prop, order) => {
    paging.value.orderByColumn = column.prop;
    paging.value.isAsc = column.order;
    getTableData();
}

// 获取任务列表
const getTask = async () => {
    const res = await getTaskList({}, {
        pageNum: 1,
        pageSize: 999
    })
    taskOptionAll.value = res.rows;
    taskList.value = res.rows.filter(item => item.level === '1')
    taskTwoList.value = res.rows.filter(item => item.level === '2')
}

const changeTaskTypeHandle = (value) => {
    taskTwoList.value = taskOptionAll.value.filter(
        item => item.fathertaskId === value
    )

    if (taskTwoList.value.find(item => item.taskId === taskTypeId2)) {
        queryParams.value.taskTypeId2 = taskTypeId2;
    } else {
        queryParams.value.taskTypeId2 = '';
    }
    getTableData()
}

const searchHandle = () => {
    queryParams.value.state = '';
    getTableData();
}

const getTableData = async () => {
    loading.value = true;
    const res = await getSendPoliceTableList(queryParams.value, paging.value)
    total.value = res.total
    tableData.value = res.rows
    loading.value = false;

}


// 改变时间
const changeDateTimerHandle = (date) => {
    if (date) {
        queryParams.value.params.beginTime = date[0];
        queryParams.value.params.endTime = date[1];
    } else {
        queryParams.value.params.beginTime = '';
        queryParams.value.params.endTime = '';
    }

    getTableData()
}

const changeSendPoliceTimerHandle = (date) => {
    if (date) {
        queryParams.value.params.sendPoliceBeginTime = date[0];
        queryParams.value.params.sendPoliceEndTime = date[1];
    } else {
        queryParams.value.params.sendPoliceBeginTime = '';
        queryParams.value.params.sendPoliceEndTime = '';
    }

    getTableData()
}
// 重置搜索
const resetQueryParamsHandle = async (elForm) => {
    if (!elForm) return
    elForm.resetFields()
    searchTime.value = []
    sendPoliceTime.value = []
    queryParams.value.params.beginTime = '';
    queryParams.value.params.endTime = '';
    queryParams.value.params.sendPoliceBeginTime = '';
    queryParams.value.params.sendPoliceEndTime = '';
    tableDataRef.value.sort(defaultSort.value.prop, defaultSort.value.order);
    await getTableData()
}

const handleDbClick = (row) => {
    if (row.sendPoliceTypeName === '直接派警') {
        AddEditSendPoliApplRef.value.showEditUsePoliAppl({
            state: 0,
            jw_sendpolice_id: row.jw_sendpolice_id,
            unit_id: row.unitName,
            object_id: row.object_id
        }, '查看警务派警信息', '4', 'View')
    }

    if (row.sendPoliceTypeName === '用警申请') {
        SeeUsePoliApplDetailRef.value.showEditUsePoliAppl({
            state: 0,
            jw_policeapply_id: row.object_id,
            unit_id: row.unitName,
        }, '用警申请信息', '1', 'View')
    }
}
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

</style>